<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Redux</title>
  </head>
  <body>
    <button id="minus">-</button>
    <span id="count">0</span>
    <button id="plus">+</button>

    <script src="./redux.min.js"></script>
    <script>
      // 3. 存储默认状态
      const initialState = {
        count: 0,
      };

      // 2. 创建 reducer 函数
      function reducer(state = initialState, action) {
        switch (action.type) {
          case "increment":
            return { count: state.count + 1 };
          case "decrement":
            return { count: state.count - 1 };
          default:
            return state;
        }
      }

      // 1. 创建 store 对象
      const store = Redux.createStore(reducer);

      // 4. 定义 action
      const increment = { type: "increment" };
      const decrement = { type: "decrement" };

      // 5. 获取按钮 给按钮添加点击事件
      document.getElementById("minus").addEventListener("click", function () {
        // 6. 获取dispatch  触发 action
        store.dispatch(decrement);
      });
      document.getElementById("plus").addEventListener("click", function () {
        // 6. 获取dispatch  触发 action
        store.dispatch(increment);
      });

      // 获取store {dispatch: ƒ, subscribe: ƒ, getState: ƒ, replaceReducer: ƒ, Symbol(observable): ƒ}
      console.log(store);
      // 获取 store 中存储的状态 state
      console.log(store.getState());

      // 订阅数据的变化
      store.subscribe(() => {
        // console.log(store.getState());
        document.getElementById("count").innerHTML = store.getState().count;
      });
    </script>
  </body>
</html>
